<template>
<div class="d1">
  <el-container>
<!--左侧栏-->
    <el-aside width="220px">
      <el-menu
        default-active="1"
        @open="handleOpen"
        @close="handleClose"
        text-color="#fff"
        active-text-color="#ffd04b"
        background-color="#304156"
        style="height: 100%"
        >
        <el-menu-item>
          <span><h2>问卷猩后台管理系统</h2></span>
        </el-menu-item>
        <el-menu-item index="1" style="margin-left: 0;" @click="toHome">
          <i class="el-icon-star-on"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="2-1" @click="toUserList">
<!--            <i class="el-icon-s-data"></i>-->
            <span>用户列表</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>问卷管理</span>
          </template>
          <el-menu-item index="3-1" @click="toQuestionList">
<!--            <i class="el-icon-s-data"></i>-->
            <span>问卷列表</span>
          </el-menu-item>
          <el-menu-item index="3-2" @click="toTestQuestion">
<!--            <i class="el-icon-s-platform"></i>-->
            <span>试题管理</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-data"></i>
            <span>问卷统计</span>
          </template>
          <el-menu-item index="4-1" @click="toQuestionCount">
<!--            <i class="el-icon-s-more"></i>-->
            <span>统计管理</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-s-check"></i>
            <span>个人中心</span>
          </template>
          <el-menu-item index="5-1" @click="toMineInfo">
            <span>我的信息</span>
          </el-menu-item>
          <el-menu-item @click="exitLogin">
            <span>退出登录</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
<!--      头部-->
      <el-header>
        <HomeHead></HomeHead>
      </el-header>
<!--      主体-->
<!--      <el-main>-->
        <router-view></router-view>
<!--      </el-main>-->
    </el-container>

  </el-container>
</div>
</template>

<script>
import HomeHead from "@/views/home/HomeHead";
import QuestionList from "@/views/question/QuestionList";
import TestQuestion from "@/views/question/TestQuestion";
import QuestionCount from "@/views/questioncount/QuestionCount";
import {tips} from "@/utils/tips";

export default {
  name: "Home",
  components: {HomeHead},
  data(){
    return{

    }
  },
  methods: {
    toHome(){
      this.$router.push('/Home');
    },
    toUserList(){
      this.$router.push('/Home/UserList');
    },
    toQuestionList(){
      this.$router.push('/Home/QuestionList');
    },
    toTestQuestion(){
      this.$router.push('/Home/TestQuestion');
    },
    toQuestionCount(){
      this.$router.push('/Home/QuestionCount');
    },
    toMineInfo(){
      this.$router.push('/Home/MineInfo');
    },
    exitLogin(){
      const _this = this;
      this.$confirm('将退出登录用户，是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        //确认后执行
        localStorage.removeItem("id");
        localStorage.removeItem("admin");
        localStorage.removeItem("pass");
        localStorage.removeItem("email");
        this.$router.push('/Login');
      }).catch(() => {
        //取消后执行
        tips(_this,"成功",'success','已取消退出登录');
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.d1{
  /*height: 98vh;*/
  /*background-color: #42b983;*/
  line-height: normal;
}
.el-header{
  background-color: lightblue;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #304156;
  color: #333;
  text-align: center;
  line-height:705px;
  height: 705px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
